<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传demo</title>
    <style>
        .body {
            margin-top: 50px;
            text-align: center;
        }
        .pic-contain {
            margin: auto;
            margin-top: 10px;
            height: 350px;
            width: 320px;
            border: 1px solid black;
        }
        /* 处理src为空显示的样式 */
        img[src=""],
        img:not([src]) {
            opacity: 0;
        }
    </style>
</head>
<body>
    <div class="body">
        <div>请上传jpg、png格式的图片，且文件大小不超过2M</div>
        <form id="myForm" action="" method="POST" encType="multipart/form-data">
            <input type="file" style="display: none;" id="file" onChange="picSelect(this)">
        </form>
        <button onclick="openPic()">请选择上传的图片</button>
        <button class="del" onclick="del()">删除</button>

        <div class="pic-contain" id="container" onclick="openPic()">
            <img style="height: 350px; width: 320px;" class="pic" />
        </div>
        <button class="submit" onclick="upload()">提交</button>
    </div>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        var isIE9 = window.ActiveXObject;//IE9以下
        var isIE = window.FileReader && !window.localStorage;//IE10 IE11
        var isElse = window.FileReader && window.localStorage;//chrome和火狐
        if (isElse) {
            $(".pic").attr("src", localStorage.getItem("url"));//给除IE外的浏览器模拟回显
        } else {

        }
        function openPic() {
            //模拟鼠标点击事件
            $("#file").click();
        }
        //为了阻止浏览器默认事件，比如直接把文件下载或者开窗口预览
        document.ondragover = function (e) {
            // 阻止ondragover的默认行为（触发ondragleave)
            e.preventDefault();
        };
        document.ondrop = function (e) {
            // 阻止ondrop的默认行为(触发在当前窗口打开客户端图片)
            e.preventDefault();
        };
        // container.ondragover = function (e) {
        //     // 阻止ondragover的默认行为（触发ondragleave)
        //     e.preventDefault();
        // }
        container.ondrop = function (e) {
            if(isIE9){
                alert("该浏览器不支持拖拽上传！");
                return;
            }
            var flag=true;
            picSelect(e,flag);
        }
        function picSelect(obj,flag) {
            if (isElse || isIE) {
                if(flag)
                {
                    var file = obj.dataTransfer.files[0];//拖拽过程中，包含数据传输中可用的所有本地文件的列表
                }else{
                    var file = obj.files[0];
                }

            } else if (isIE9) {
                var filePath = obj.value;
                var fileSystem = new ActiveXObject("Scripting.FileSystemObject");//利用ActiveXObject来创建FileSystemObject操作文件
                var file = fileSystem.GetFile(filePath);//访问文件对象的相关属性
            }
            var reg = /(\.jpg|\.png)$/;//正则匹配图片后缀为jpg或者png
            if (!reg.test(file.name)) {
                alert("只能上传jpg和png格式的图片！");
                return;
                // 2097152
            } else if (file.size > 512000) {
                alert("只能上传小于2M的图片！");
                return;
            } else {
                if (isElse) {
                    var reader = new FileReader();
                    //会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
                    reader.readAsDataURL(file);
                    reader.onload = function (e) {//读取文件
                        localStorage.setItem("url", e.target.result);
                        $(".pic").attr("src", localStorage.getItem("url"));//把图片地址赋给src
                    }
                } else if (isIE) {
                    var reader = new FileReader();
                    //会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
                    reader.readAsDataURL(file);
                    reader.onload = function (e) {//读取文件
                        $(".pic").attr("src", e.target.result);//把图片地址赋给src
                    }
                } else if (isIE9) {
                    $(".pic").attr("src", obj.value);
                }
            }
        }
        function del() {
            $(".pic").attr('src', '');//把空赋给src
            if (isElse) {
                localStorage.clear();
            }
        }
        function upload() {
            //文件格式
            if (isIE || isElse) {
                if (!$("#file").files) {
                    return;
                }
                var file = $("#file").files[0];
                var formData = new FormData();
                formData.set("imgupload", file);
                $.ajax({
                    url: "",
                    type: "POST",
                    data: formData,                    // 上传formdata封装的数据
                    dataType: "JSON",
                    cache: false,                      // 不缓存
                    processData: false,                // jQuery不要去处理发送的数据
                    contentType: false,                // jQuery不要去设置Content-Type请求头
                    success: function (data) {
                        if (data.code == 200) {
                            console.log("图片上传成功！");
                        } else {
                            console.log("图片上传失败！");
                        }
                    }
                });
            } else if (isIE9) {
                $("myForm").submit();
            }
        }
    </script>
</body>

</html>